<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const algorithms = ref([
  {
    name: '排序算法',
    items: [
      { id: 'bubble', title: '冒泡排序', animation: '/algorithms/bubble-sort.gif.html' },
      { id: 'quick', title: '快速排序', animation: '/algorithms/quick-sort.gif.html' },
      { id: 'merge', title: '归并排序', animation: '/algorithms/merge-sort.gif.html' },
      { id: 'insertion', title: '插入排序', animation: '/algorithms/insertion-sort.gif.html' },
      { id: 'selection', title: '选择排序', animation: '/algorithms/selection-sort.gif.html' },
      { id: 'heap', title: '堆排序', animation: '/algorithms/heap-sort.gif.html' }
    ]
  },
  {
    name: '图算法',
    items: [
      { id: 'dijkstra', title: '迪杰斯特拉', animation: '/algorithms/dijkstra.gif.html' },
      { id: 'floyd', title: 'Floyd全源最短路', animation: '/algorithms/floyd.gif.html' },
      { id: 'bfs', title: '广度优先', animation: '/algorithms/bfs.gif.html' },
      { id: 'dfs', title: '深度优先', animation: '/algorithms/dfs.gif.html' },
      { id: 'prim', title: 'Prim最小生成树', animation: '/algorithms/prim.gif.html' },
      { id: 'kruskal', title: 'Kruskal最小生成树', animation: '/algorithms/kruskal.gif.html' },
      { id: 'topo', title: '拓扑排序', animation: '/algorithms/topo-sort.gif.html' }
    ]
  },
  {
    name: '查找算法',
    items: [
      { id: 'binary', title: '二分查找', animation: '/algorithms/binary-search.gif.html' },
      { id: 'sequential', title: '顺序查找', animation: '/algorithms/sequential-search.gif.html' },
      { id: 'hash', title: '哈希查找', animation: '/algorithms/hash-search.gif.html' },
      { id: 'interpolation', title: '插值查找', animation: '/algorithms/interpolation-search.gif.html' },
      { id: 'fibonacci', title: '斐波那契查找', animation: '/algorithms/fibonacci-search.gif.html' },
      { id: 'block', title: '分块查找', animation: '/algorithms/block-search.gif.html' }
    ]
  }
])

const currentAlgorithm = ref(null)
const dialogVisible = ref(false)
const addDialogVisible = ref(false)
const newAlgorithm = ref({
  category: '',
  title: '',
  animation: ''
})

const showAlgorithm = (algorithm) => {
  currentAlgorithm.value = algorithm
  dialogVisible.value = true
}

const handleAddAlgorithm = () => {
  if (!newAlgorithm.value.category || !newAlgorithm.value.title || !newAlgorithm.value.animation) {
    ElMessage.warning('请填写完整的算法信息')
    return
  }

  const category = algorithms.value.find(c => c.name === newAlgorithm.value.category)
  if (!category) {
    ElMessage.warning('请选择正确的算法类别')
    return
  }

  category.items.push({
    id: newAlgorithm.value.title.toLowerCase().replace(/\s+/g, '-'),
    title: newAlgorithm.value.title,
    animation: newAlgorithm.value.animation
  })

  ElMessage.success('添加成功')
  addDialogVisible.value = false
  newAlgorithm.value = {
    category: '',
    title: '',
    animation: ''
  }
}
</script>

<template>
  <div class="algorithm-visualizer">
    <el-dropdown trigger="click">
      <el-button type="primary" class="algo-btn">
        算法演示
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="category in algorithms" :key="category.name">
            <el-dropdown-item divided class="category-title">{{ category.name }}</el-dropdown-item>
            <el-dropdown-item 
              v-for="algo in category.items" 
              :key="algo.id"
              @click="showAlgorithm(algo)"
            >
              {{ algo.title }}
            </el-dropdown-item>
          </template>
          <el-dropdown-item divided>
            <el-button type="primary" link @click="addDialogVisible = true">
              <el-icon><plus /></el-icon> 添加算法
            </el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dialog
      v-model="dialogVisible"
      :title="currentAlgorithm?.title"
      width="60%"
      destroy-on-close
      class="algorithm-dialog"
    >
      <div v-if="currentAlgorithm" class="algorithm-content">
        <iframe 
          :src="currentAlgorithm.animation" 
          frameborder="0" 
          class="algorithm-frame"
        ></iframe>
      </div>
    </el-dialog>

    <el-dialog
      v-model="addDialogVisible"
      title="添加新算法"
      width="30%"
    >
      <el-form :model="newAlgorithm" label-width="100px">
        <el-form-item label="算法类别">
          <el-select v-model="newAlgorithm.category" placeholder="请选择算法类别">
            <el-option
              v-for="category in algorithms"
              :key="category.name"
              :label="category.name"
              :value="category.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="算法名称">
          <el-input v-model="newAlgorithm.title" placeholder="请输入算法名称" />
        </el-form-item>
        <el-form-item label="动画文件">
          <el-input v-model="newAlgorithm.animation" placeholder="请输入动画文件路径" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddAlgorithm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.algorithm-visualizer {
  position: fixed;
  top: 20px;
  right: 100px;
  z-index: 1000;
}

.algo-btn {
  display: flex;
  align-items: center;
}

.algorithm-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.algorithm-frame {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
}

.algorithm-dialog :deep(.el-dialog__body) {
  padding: 20px;
  background: #f5f7fa;
}

:deep(.category-title) {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #606266 !important;
  user-select: none !important;
  cursor: default !important;
  pointer-events: none !important;
  padding: 8px 20px !important;
  background-color: #f5f7fa !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 